import React from 'react';
import Line from './line';
import Bar from './bar';
import Pie from './pie';
import Map from './map';
import Scatter from './scatter';
import Radar from './radar';
import Funnel from './funnel';
import Gauge from './gauge';
import Parser from './parse';

const ctypes=[
                {value:'line',name:'折线图'}
                ,{value:'bar',name:'柱状图'}
                ,{value:'pie',name:'饼图'}
                ,{value:'map',name:'地图'}
                ,{value:'scatter',name:'散点图'}
                ,{value:'radar',name:'雷达图'}
                ,{value:'funnel',name:'漏斗图'}
                ,{value:'gauge',name:'仪表盘'}
            ];

const options=Parser.options();

let getStateTpl = function(states,type){
    if(!type) return states;
    let obj=options[type];
    if(obj!==undefined){
        obj.base.forEach(e=>{
            if(states[e]===undefined){
                states[e]='';
            }
        });
    }
    return states;
}
class Charts extends React.Component {
    constructor(props){
        super(props);
        this.control=null;
        this.data={};
        this.group={};
        this.sheets=props.sheets;
        this.state={
            type:'',
            time:new Date().getTime()
        };
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleSave = this.handleSave.bind(this);
        this.handleSaveChart = this.handleSaveChart.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleCallback = this.handleCallback.bind(this);
        
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            if(data.params!=undefined){
                that.group=data.params;
                let type=!!that.group.type?that.group.type:'';
                that.state=getStateTpl(that.state,type);
                that.setState({type:type});
            }
            $('#g_chartmodalbox').show();
        });
        this.control.addHook('refresh',function(data){
            that.setState({time:new Date().getTime()});
        });
        this.control.addHook('hide',function(){
            $('#g_chartmodalbox').hide();
        });
    }
    render(){
        this.parseData();
        let that=this;
        let confPanel=this.getConfPanel(this.state.type);
        let style={
            display:'none',
            width:'40%',
            top:'45px',
            right:0,
            left:'60%',
            bottom:0,
            zIndex:99,
            backgroundColor:'#ffffff',
            borderLeft:'1px solid #666666',
            boxShadow:'-1px 1px 1px 2px rgba(0,0,0,0.3)'
        }
        let bodystyle={
                position: 'absolute',
                left: 0,
                top:'51px',
                bottom: '65px',
                right:0,
                overflow:'scroll'
            },
            footstyle={
                position: 'absolute',
                left: 0,
                bottom: 0,
                right:0,
                backgroundColor:'#ffffff'
            };
        return (
            <div id="g_chartmodalbox" className="modal" style={style} data-backdrop="false">
                <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.handleClose}><span aria-hidden="true">&times;</span></button>
                    <h4 className="modal-title">图表配置</h4>
                </div>
                <div className="modal-body" style={bodystyle}>
                    <span className="opts-label">图表类型:</span>
                    <div className="opts-item">
                        <select className="form-control" data-id="type" defaultValue={this.state.type} onChange={this.handleChange}>
                            <option value="">请选择</option>
                            {
                                ctypes.map(e=>{
                                    return <option key={e.value} value={e.value}>{e.name}</option>
                                })
                            }
                        </select>
                    </div>
                    {confPanel}
                </div>
                <div className="modal-footer" style={footstyle}>
                    <button type="button" className="btn btn-primary" onClick={that.handleSave} >确认</button>
                    <button type="button" className="btn btn-primary" onClick={that.handleSaveChart} >保存图表部件</button>
                </div>
            </div>
        )
    }

                    
    handleClose(){
        $('#g_chartmodalbox').hide();
    }
    handleSave(){
        this.control.dispatch('callback',{
            evt:'savegroup',
            data:this.group
        });
        console.log(this.group);
        // this.handleClose();
    }
    handleSaveChart(){
        this.control.dispatch('callback',{
            evt:'savechart',
            data:this.chartoption
        });
    }
    handleChange(e){
        let key=e.target.getAttribute('data-id');
        this.group[key]=e.target.value;
        if(key==='type'){
            if(e.target.value!=='') this.state=getStateTpl(this.state,e.target.value);
            this.setState({type:this.group.type});
        }
    }
    handleCallback(e,value){
        if(e==='maptype'){
            this.setState({'maptype':value});
            return;
        }else if(e==='chartoption'){
            this.chartoption=value;
            return;
        }
        let sels = this.sheets.handsontable.getSelected();
        let sel1=[sels[0],sels[1]],sel2=[sels[2],sels[3]]
        if(sel1[0]>sel2[0]||sel1[1]>sel2[1]){
            sels=[sel2[0],sel2[1],sel1[0],sel1[1]];
        }else{
            sels=[sel1[0],sel1[1],sel2[0],sel2[1]];
        }
        this.group[e]=sels;
        let key=e,values;
        let state={};
        let d=this.getCells(sels);
        values=d[1];
        let data=[];
        values.forEach(e=>{
            data.push(e.value);
        });
        state[e]=data.join(',');
        this.setState(state);
    }
    parseData(){
        let that=this;
        let type=this.state.type;
        if(!type) return;
        let base = options[type].base;
        base.forEach(e=>{
            if(!!that.group[e]){
                let d=that.getCells(that.group[e],e);
                that.data[e]={direction:d[0],value:d[1]};
            }
        });
    }
    getCells(sels,type){
        let values=[];
        let direction='',ld=0,cd=0;
        let r=sels[0],c=sels[1],lr=sels[2],lc=sels[3];
        for(;r<=lr;r++){
            cd=0;
            for(let _c=c;_c<=lc;_c++){
                let data=this.sheets.getCell(r,_c);
                if(data==null){
                    if(type=='value'){
                        values.push({r:r,c:_c,value:null});
                    }
                }else{
                    values.push({r:r,c:_c,value:data.value});
                }
                cd++;
            }
            ld++;
        }
        if(ld<cd){
            direction='left-right';
        }else if(ld>cd){
            direction='top-bottom';
        }else{
            direction='';
        }
        return [direction, values];
    }
    getConfPanel(type){
        let dom;
        switch(type){
            case 'line':
            	dom=this.initLine
            break;
            case 'bar':
            	dom=this.initBar
            break;
            case 'pie':
            	dom=this.initPie
            break;
            case 'map':
            	dom=this.initMap
            break;
            case 'scatter':
            	dom=this.initScatter
            break;
            case 'radar':
            	dom=this.initRadar
            break;
            case 'funnel':
            	dom=this.initFunnel
            break;
            case 'gauge':
            	dom=this.initGauge
            break;
            default:
                dom=function(){
                    return <div/>;
                };
            break;
        }
        dom=dom.bind(this);
        return dom();
    }
    initLine(){
        return <Line chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initBar(){
        return <Bar chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initPie(){
        return <Pie chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initMap(){
        return <Map chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initScatter(){
        return <Scatter chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initRadar(){
        return <Radar chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initFunnel(){
        return <Funnel chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
    initGauge(){
        return <Gauge chartdata={this.data} callback={this.handleCallback} state={this.state} />
    }
}

export default Charts;